import { useCallback, useEffect, useState } from 'react'
import styled, { css } from 'styled-components'
import { withdrawList } from '../../service'
import Message from '../../component/Message'
import Loading from '../../component/Loading'
import Item, { ColumnData } from './Item'
import { WithDrawRecord } from '../../service/interface'
import classNames from 'classnames'
import { useTranslation } from 'react-i18next'
import Empty from '../../component/Empty'
import IconTeamEmpty from '../../asserts/tab_team_normal.png'
import { formatStrToPoint } from '../../utils/string'

interface Props {
    className?: string
}

const TITLE: Array<ColumnData[]> = [
    [
        { label: 'Time', width: '40%', className: classNames('first') },
        { label: 'Asset', width: '30%', className: classNames('first', 'center') },
        { label: 'Amount', width: '30%', className: classNames('first', 'center') },
    ]
]

const Container = styled.div`
    padding: .625rem 1.25rem;
    box-sizing: border-box;
`

const StyledItem = styled(Item) <{ $showLine?: number }>`
    ${({ $showLine }) => $showLine ? css`
        border-bottom: 1px solid rgba(237, 249, 252, 0.5);
    `: undefined}
    .first {
        padding: .625rem 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    };
    .center {
        justify-content: center;
    };
    .ellipsis {
        overflow: hidden; 
        text-overflow: ellipsis;
        white-space:nowrap;
        display: block;
        text-align: start;
    }
    .second {
        margin-bottom: .625rem;
    };
`

const Content: React.FC<Props> = ({ className }) => {
    const { t } = useTranslation()
    const [data, setData] = useState<Array<ColumnData[][]>>([])
    const [loading, setLoading] = useState(false)

    const fetchData = useCallback(async () => {
        setLoading(true)
        const result = await withdrawList();
        setLoading(false)
        if (!result.success) {
            Message.error(result.message)
            return
        }

        const info = result.data?.reduce((draft: Array<ColumnData[][]>, item: WithDrawRecord) => {
            draft.push([
                [
                    { label: item.time, width: '40%', className: 'first' },
                    { label: item.currency, width: '30%', className: classNames('first', 'center') },
                    { label: item.amount, width: '30%', className: classNames('first', 'center') },
                ],
                [
                    { label: `${t('record.address')}: ${formatStrToPoint(item.address, 8, 8)}`, width: '70%', className: classNames('second', 'ellipsis') },
                    { label: item.statusRemark, width: '30%', className: classNames('second', 'center') },

                ]
            ])
            return draft
        }, [])
        setData(info || [])
    }, [t])

    useEffect(() => {
        fetchData()
    }, [fetchData])

    return <Container className={className}>
        <StyledItem
            className='stick'
            data={TITLE}
        />
        {data?.length ?
            data.map((item, idx) => <StyledItem
                $showLine={1}
                key={idx}
                data={item}
            />)
            : <Empty
                icon={IconTeamEmpty}
                style={{ marginTop: '20%', paddingBottom: '0' }}
            />}
        <Loading show={loading} />
    </Container>
}
export default Content